<template>
  <div class="container">


    <el-table height="550px" border size="small" :data="data" @selection-change="handleSelectionChange">
      <el-table-column label="ID" prop="id" width="50" align="center"></el-table-column>
      <el-table-column label="用户名" prop="username" width="80" align="center"></el-table-column>
      <el-table-column label="工作内容" width="90" align="center">
        <template #default="scope">
          <div v-for="(item,index) in scope.row.contents" :key="index">
            {{index}}:{{item.content}}
          </div>
        </template>
<!--        <template v-slot="scope">-->
<!--          <-->
<!--&lt;!&ndash;          <el-button @click="goContentPage(scope.row.id)">工作内容</el-button>&ndash;&gt;-->
<!--        </template>-->
      </el-table-column>

      <el-table-column prop="contents[0].start" label="工作开始时间">
        <template #default="scope">
          <div v-for="(item,index) in scope.row.contents" :key="index">
            {{index}}:{{item.start}}
          </div>
        </template>
      </el-table-column>

<!--      <el-table-column prop="contents[0].content" label="工作内容"></el-table-column>-->
      <el-table-column prop="contents[0].end" label="工作结束时间">
        <template #default="scope">
          <div v-for="(item,index) in scope.row.contents" :key="index">
            {{index}}:{{item.end}}
          </div>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
        class="pagination"
        background
        layout="total, prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"></el-pagination>
  </div>

</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, watch, ref, reactive, computed } from "vue";
import mixin from "@/mixins/mixin";
import { HttpManager } from "@/api";
import { RouterName } from "@/enums";
import {useRouter} from "vue-router";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const {routerManager } = mixin();
    const router = useRouter()
    // 记录歌曲，用于显示
    const tableData = ref([]);
    // 记录歌曲，用于搜索时能临时记录一份歌曲列表
    const tempDate = ref([]);
    // 页数
    const pageSize = ref(5);
    // 当前页
    const currentPage = ref(1);

    // 计算当前表格中的数据
    const data = computed(() => {
      return tableData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
    });

    getData();
    // getData1();
    // 获取用户信息
    async function getData() {
      tableData.value = [];
      tempDate.value = [];
      const result = (await HttpManager.getAllUser()) as ResponseBody;
      tableData.value = result.data;
      tempDate.value = result.data;

      currentPage.value = 1;
    }
    //  function getData1() {
    //   tableData.value = [];
    //   tempDate.value = [];
    //   // const result = (await HttpManager.getAllUser()) as ResponseBody;
    //   // tableData.value = result.data;
    //   // tempDate.value = result.data;
    //   // console.log(result.data.id);
    //   // currentPage.value = 1;
    //   let promise = null;
    //   // promise = HttpManager.contentOfUserId(proxy.$route.query.id) ;
    //   promise = ( HttpManager.contentOfUserId(63)) as any;
    //   promise.then((res) => {
    //     console.log(res)
    //     for (let item of (res as ResponseBody).data) {
    //       getUsers(item.userId, item);
    //     }
    //   }).catch(err => {
    //     console.log(err)
    //   })
    // }
    // async function getUsers(id, item) {
    //   const result = (await HttpManager.getUserOfId(id)) as ResponseBody;
    //   //item.username = result.data[0].username;
    //   tableData.value.push(item);
    //   tempDate.value.push(item);
    // }
    // 获取当前页
    function handleCurrentChange(val) {
      currentPage.value = val;
    }


    function goContentPage(id) {
      const breadcrumbList = reactive([
        {
          path: RouterName.User,
          name: "用户管理",
        },

      ]);
      proxy.$store.commit("setBreadcrumbList", breadcrumbList);
      router.push({
        // name: RouterName.Content,
        path: RouterName.Content,
        query: {  id }
      })
      // routerManager(RouterName.Content, { path: RouterName.Content, query: { id } });
    }

    // 记录当前要删除的行
    const idx = ref(-1);
    // 记录当前要删除的列表
    const multipleSelection = ref([]);
    // 显示删除框
    const delVisible = ref(false);


    function handleSelectionChange(val) {
      multipleSelection.value = val;
    }

    return {
      data,
      tableData,
      delVisible,
      pageSize,
      currentPage,
      handleSelectionChange,
      handleCurrentChange,
      confirm,
      goContentPage,
    };
  },
});
</script>

<style scoped></style>
